<template>
    <div>
        <div style="display: flex;flex-wrap: wrap;justify-content: space-around;margin-top: 10px">
            <el-card class="box-card" style="width: 250px">
                <div slot="header" class="clearfix">
                    <el-tag size="small" type="warning">各部门人数</el-tag>
                </div>
                <el-table
                        v-loading="loading"
                        :data="departmentnumber"
                        border
                        stripe
                        size="mini"
                        style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="部门名称"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="count"
                            label="部门人数">
                    </el-table-column>
                </el-table>
                <el-pagination
                        small
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :total="total">
                </el-pagination>
            </el-card>
            <el-card class="box-card" style="width: 330px">
                <div slot="header" class="clearfix">
                    <el-tag size="small" type="warning">各部门考勤状况</el-tag>
                </div>
                <el-table
                        v-loading="loading"
                        :data="departmentrewardorpenalty"
                        border
                        stripe
                        size="mini"
                        style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="部门名称"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="late"
                            label="迟到次数">
                    </el-table-column>
                    <el-table-column
                            prop="takeLeave"
                            label="请假次数">
                    </el-table-column>
                </el-table>
                <el-pagination
                        small
                        background
                        @size-change="handleSizeChange1"
                        @current-change="handleCurrentChange1"
                        layout="prev, pager, next"
                        :total="total1">
                </el-pagination>
            </el-card>
            <el-card class="box-card" style="width: 500px">
                <div slot="header" class="clearfix">
                    <el-tag size="small" type="warning">当月考勤排行</el-tag>
                </div>
                <el-table
                        v-loading="loading"
                        :data="emplateandtakeleave"
                        border
                        stripe
                        size="mini"
                        style="width: 100%">
                    <el-table-column
                            prop="employee.name"
                            label="员工名称"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="employee.jobNo"
                            label="员工工号">
                    </el-table-column>
                    <el-table-column
                            prop="employee.department.name"
                            label="部门名称"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="late"
                            label="迟到次数">
                    </el-table-column>
                    <el-table-column
                            prop="takeLeave"
                            label="请假次数">
                    </el-table-column>
                </el-table>
                <el-pagination
                        small
                        background
                        @size-change="handleSizeChange2"
                        @current-change="handleCurrentChange2"
                        layout="prev, pager, next"
                        :total="total2">
                </el-pagination>
            </el-card>
        </div>
    </div>
</template>

<script>
    import {getRequest} from "../../utils/api";

    export default {
        name: "StaPers",
        data(){
            return{
                loading: false,
                departmentnumber:[],
                departmentrewardorpenalty:[],
                emplateandtakeleave:[],
                pageNo: 1,
                pageSize: 10,
                total:10,
                pageNo1: 1,
                pageSize1: 10,
                total1:10,
                pageNo2: 1,
                pageSize2: 10,
                total2:10
            }
        },
        mounted() {
            this.getAlldepartmentnumber();
            this.getAlldepartmentrewardorpenalty();
            this.getAllemplateandtakeleave();
        },
        methods:{
            getAlldepartmentnumber(){
                this.loading =true;
                this.getRequest("/statistics/personnel/getDepartmentNumbers/?pageNo=" + this.pageNo + "&pageSize=" + this.pageSize).then(resp=>{
                    this.loading =false;
                    if(resp){
                        this.departmentnumber = resp.data;
                        this.total = resp.total;
                    }
                })
            },
            handleSizeChange(val){
                this.pageSize = val;
                this.getAlldepartmentnumber();
            },
            handleCurrentChange(val){
                this.pageNo = val;
                this.getAlldepartmentnumber();
            },
            getAlldepartmentrewardorpenalty(){
                this.loading = true;
                this.getRequest("/statistics/personnel/getDepartmentRewardOrPenalty/?pageNo=" + this.pageNo1 + "&pageSize=" + this.pageSize1).then(resp=>{
                    this.loading = false;
                    if(resp){
                        this.departmentrewardorpenalty = resp.data;
                        this.total1 = resp.total;
                    }
                })
            },
            handleSizeChange1(val){
                this.pageSize1 = val;
                this.getAlldepartmentrewardorpenalty();
            },
            handleCurrentChange1(val){
                this.pageNo1 = val;
                this.getAlldepartmentrewardorpenalty();
            },
            getAllemplateandtakeleave(){
                this.loading = true;
                this.getRequest("/statistics/personnel/getEmpLateandTakeLeave/?pageNo=" + this.pageNo2 + "&pageSize=" + this.pageSize2).then(resp=>{
                    this.loading = false;
                    if(resp){
                        this.emplateandtakeleave = resp.data;
                        this.total2 = resp.total;
                    }
                })
            },
            handleSizeChange2(val){
                this.pageSize2 = val;
                this.getAllemplateandtakeleave();
            },
            handleCurrentChange2(val){
                this.pageNo2 = val;
                this.getAllemplateandtakeleave();
            }
        }
    }
</script>

<style scoped>

</style>
